<template>
	<view id="app">
		
	<!--头像栏目 -->
	<view class="user">
		<view style="display: flex;align-items: center;font-size: 45rpx;font-weight: bold;font-family: 宋体;">欢迎您~<text style="color: #90A674;" @click="login" v-model="isLog" >{{isLog}}</text></view>
		
		<view><image :src="userAvatar" class="ima"></image></view>
	</view>
	
	<!-- 错题正确率 -->
	<view class="tr">
		<view style="color: rgb(250, 0, 0 ,0.4)">刷题正确率</view>
		<view style="color: #90A674;">坚持天数:1</view>
	</view>
	<!-- 错题本 -->
	<view class="cuoti">
		
		<view style="margin-top: 5%; margin-left: 6%; display: flex; align-items: center; justify-content: center;box-shadow: 0 0 20px rebeccapurple; border: 50rpx solid whitesmoke;border-radius: 100%;width: 160rpx;height: 160rpx;">
			<view style="display: flex;  box-shadow: 0 0 10px rebeccapurple;border: 2rpx solid rebeccapurple;border-radius: 100%;width: 120rpx;height: 140rpx;">
				<text style="text-align: center; font-size: 40rpx;color:rebeccapurple;display: flex;margin-top: 50%;width: 80rpx;">{{rate}}% </text>
			</view>
		</view>
		
		<view>
			<view ><image src="../../static/image/35.wrong-text.png" @click="mycuoti">错题本</view>
			<view><image src="../../static/image/我的收藏.png">我的收藏</view>
			<view><image src="../../static/image/编辑信息.png">刷题王者</view>
		</view>
	</view>
	<!-- 考点选项 -->
	<view class="question">
		<view class="question1">
			<view><image src="../../static/image/考点背诵.jpg"><view @click="examMemorize">考点背诵</view></view>
			<view><image src="../../static/image/乱序刷题.jpg"><view @click="">乱序刷题</view></view>
			<view><image src="../../static/image/模拟考试.jpg"><view @click="exam">模拟考试</view></view>
		</view>
		<view class="question2">
			<view><image src="../../static/image/考点刷题.jpg"><view @click="">考点刷题</view></view>
			<view><image src="../../static/image/视频讲解.jpg"><view @click="video">视频讲解</view></view>
			<view><image src="../../static/image/高校真题.jpg"><view @click="">高校真题</view></view>
		</view>
	</view>
	
	
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate:0,
				rateResult:0,
				user:[],
				isLog:'立即登录',
				userAvatar:'',
			}
		},
		onLoad() {

		},
		methods: {
			add (){
				uni.navigateTo({
					url:'/pages/add/add'
					});
						},
			//视频讲解
			video(){
				uni.navigateTo({
					url:'/pages/videoExplain/videoExplain'
				})
			},
			//模拟考试
			exam (){
				uni.navigateTo({
				url:'/pages/exam/exam'
			});	
			},
			//考点背诵
			examMemorize(){
				uni.navigateTo({
					url:'/pages/examMemorize/examMemorize'
				})
			},
			
			mycuoti(){
				uni.navigateTo({
					url:'/pages/mycuoti/mycuoti'
				})
			},
			login(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
		},
		onShow() {
			this.isLog = uni.getStorageSync('userName')
			this.userAvatar = uni.getStorageSync('userAvatar')
		}, 
		mounted() {
			this.rateResult=uni.getStorageSync('finalRate')
			this.rate=this.rateResult.toFixed(0)
			console.log(this.rateResult)
			this.isLog = uni.getStorageSync('userName')
			}
	}
</script>

<style>
	#app{
		background-color: #F0EEEF;	
	}
		
	.tr{
			display: flex;
			background-color: #F0EEEF;
			border: 5rpx solid whitesmoke;
			border-radius: 20rpx;
			height: 60px;
			justify-content: space-around;
			align-items: center;
		}
	.ima{
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
		margin-right: 40rpx;
		margin-top: 10rpx;
	}
	.user{
		display: flex;
		justify-content: space-between;
		height: 160rpx;
		background-color: #F0EEEF;
	}
/* 	.user>view{
		border: 5rpx solid whitesmoke;
	} */
	.tr{
		display: flex;
		background-color: #F0EEEF;
		border: 5rpx solid whitesmoke;
		border-radius: 20rpx;
		height: 60px;
		margin: 40prx 40rpx;
		justify-content: space-around;
	}
	.cuoti{
		display: flex;
		justify-content: space-around;
		height: 320rpx;
	}
	.cuoti>view{
		border: 5rpx solid whitesmoke;
		border-radius: 20rpx;
		background-color: #F0EEEF;
	}
	.cuoti>view:nth-child(1){
		width: 60%;
	}
	.cuoti>view:nth-child(2){
		width: 30%;
	}
	.cuoti>view>view{
		display: flex;
		padding: 10rpx;
		flex-direction: column;
		padding-left: 40%;
		padding-top: 6%;
		font-size: 20rpx;
	}
	.cuoti>view>view>image{
		width: 60rpx;
		height: 60rpx;
	}
	.question{
		background-color: #F0EEEF;
		border-radius: 20rpx;  
		border: 8rpx solid whitesmoke;
		display: flex;
		justify-content: space-around;
		height: 460rpx;
	}
	.question1{
		border: 8rpx solid whitesmoke;
		border-radius: 40rpx;
		width: 45%;
		height: 90%;
		margin-top: 2.5%;
	}
	.question1>view{
		display: flex;
		padding: 20rpx;
	}
	.question1>view>image{
		width: 80rpx;
		height: 80rpx;
	}
	.question2{
		border: 8rpx solid whitesmoke;
		border-radius: 40rpx;
		width: 45%;
		height: 90%;
		margin-top: 2.5%;
	}
	.question2>view{
		display: flex;
		padding: 20rpx;
	}
	.question2>view>image{
		width: 80rpx;
		height: 80rpx;
	}
	.question>view>view>view{
		color: #90A674;
		padding: 20rpx;
		border:2rpx solid whitesmoke;
		border-radius: 40rpx;
	}
</style>
